<script setup>
import { ref } from 'vue'

const alarmLogs = ref([
  {
    id: 1,
    time: '2024-01-20 10:30:00',
    cabin: 'A区域',
    type: '温度过高',
    level: '严重',
    status: '未处理'
  }
])

const alarmRules = ref([
  {
    id: 1,
    name: '温度报警',
    parameter: '温度',
    condition: '>',
    threshold: 30,
    level: '严重'
  }
])

const handleAlarm = (row) => {
  // 处理报警
}

const addRule = () => {
  // 添加规则
}
</script>

<template>
  <div class="alarm-management">
    <el-tabs>
      <!-- 报警日志 -->
      <el-tab-pane label="报警日志">
        <el-table :data="alarmLogs">
          <el-table-column prop="time" label="时间" />
          <el-table-column prop="cabin" label="舱体" />
          <el-table-column prop="type" label="报警类型" />
          <el-table-column prop="level" label="报警级别">
            <template #default="{ row }">
              <el-tag :type="row.level === '严重' ? 'danger' : 'warning'">
                {{ row.level }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" />
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button @click="handleAlarm(row)">处理</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <!-- 预警规则 -->
      <el-tab-pane label="预警规则">
        <el-button type="primary" @click="addRule">添加规则</el-button>
        <el-table :data="alarmRules" class="mt-4">
          <el-table-column prop="name" label="规则名称" />
          <el-table-column prop="parameter" label="监控参数" />
          <el-table-column prop="condition" label="条件" />
          <el-table-column prop="threshold" label="阈值" />
          <el-table-column prop="level" label="报警级别" />
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button type="primary" link>编辑</el-button>
              <el-button type="danger" link>删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped>
.alarm-management {
  padding: 20px;
}
.mt-4 {
  margin-top: 20px;
}
</style>